<template>
	<div id="wangeditor">
		<div ref="editorElem" style="text-align: left"></div>
	</div>
</template>
<script>
// https://www.wangeditor.com/index.html
import E from "wangeditor";
export default {
	name: "Editor",
	data() {
		return {
			editor: null,
			editorContent: "",
		};
	},
	// catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
	props: ["value"], // 接收父组件的方法
	mounted() {
		this.editor = new E(this.$refs.editorElem);
		// 编辑器的事件，每次改变会获取其html内容
		this.editor.config.onchange = (html) => {
			this.editorContent = html;
			this.$emit("input", this.editorContent);
			// this.catchData(this.editorContent) // 把这个html通过catchData的方法传入父组件
		};
		this.editor.config.menus = [
			// 菜单配置
			"head", // 标题
			"bold", // 粗体
			"fontSize", // 字号
			"fontName", // 字体
			"italic", // 斜体
			"underline", // 下划线
			"strikeThrough", // 删除线
			"foreColor", // 文字颜色
			"backColor", // 背景颜色
			"link", // 插入链接
			"list", // 列表
			"justify", // 对齐方式
			"quote", // 引用
			"emoticon", // 表情
			"image", // 插入图片
			"table", // 表格
			"code", // 插入代码
			"undo", // 撤销
			"redo", // 重复
		];
		this.editor.create(); // 创建富文本实例
	},
};
</script>
